<%@ taglib prefix="s" uri="/struts-tags"%>

<script>
function outputUpdate(vol) {
document.querySelector('#volume').value = vol;}

function outputUpdate2(vol) {
	document.querySelector('#volume1').value = vol;}

</script>
<style>
#ProductList {
	
	height: 100%;
}

#ProductListLeftMenu {
	position: absolute;
	width: 150px;
	height: 100px;
	background-color: #fffff0;
}

#ProductListLeftMenu ul {
	list-style: none;
	text-decoration: none;
	display: block;
	font-family: Arial, Verdana;
	margin: 0px;
	color: #000000;
	white-space: nowrap;
	padding: 5px 10px 0px 10px;
}

#ProductListLeftMenu ul a {
	text-decoration: none;
	color: #444444;
	font-weight: bold;
	font-size: 14px;
}

#ProductListLeftMenu  li {
	list-style: none;
	font-family: Arial, Verdana;
	margin: 0px;
	color: #000000;
}

#ProductListLeftMenu ul ul a {
	text-decoration: none;
	color: #666666;
	font-weight: normal;
}

#ProductListRightMenu {
	position: absolute;
	background-color: #f0ffff;
	top: 0px;
	left: 150px;
	width: calc(100% - 150px);
	height: 100%;
}

#footer {
	font-family: Arial, Verdana; 
	font-size:12px;
	height: 50px;
}
</style>
<div id="container">
	<div id="ProductList">
		<div id="ProductListLeftMenu">
			<s:iterator value="leftSideMenuList" var="leftSideCategory">
				<ul>
					<li><a
						href="<s:url action="productList">
			<s:param name="gender" ><s:property  value="gender"/></s:param>
			<s:param name="category" ><s:property /></s:param>
			<s:param name="type" ></s:param>

			<s:param name="pageNum" >1</s:param></s:url>"><s:property /></a>
					</li>
					<ul>
						<s:set name="category1" value="category" />
						<s:if test="%{#category1==#leftSideCategory}">


							<s:iterator value="leftSideSubMenuList" var="leftSideType">
								<li><a
									href="<s:url action="productList">
									<s:param name="gender" ><s:property  value="gender"/></s:param>
									<s:param name="category" ><s:property value="category"/></s:param>
									<s:param name="type" ><s:property value="%{#leftSideType}" /></s:param>
									<s:param name="pageNum" >1</s:param></s:url>">
									<s:property value="%{#leftSideType}" /></a></li>
							</s:iterator>
						</s:if>
					</ul>



				</ul>

			</s:iterator>
			<!-- Start of Criteria Search -->
			<form action="productSearch.action">
			<p> Criteria Search</p>
			<label for=fader>Price Range</label>
			  <input type=range min=0 max=1000 value=0 id=fader1 step=1 name="lower"
				oninput="outputUpdate(value)">
			<input type=range min=0 max=1000 value=1000 id=fader2 step=1 name="upper"
				oninput="outputUpdate2(value)"><br>
			From $<output for=fader1 id=volume>0</output> to
			$<output for=fader2 id=volume1>1000</output><br>
			<input type="hidden" name="gender" value='<s:property  value="gender"/>'>
			<input type="hidden" name="category" value='<s:property value="category"/>'>
			<input type="hidden" name="type" value='<s:property value="type" />'>
			<input type="hidden" name="pageNum" value="1">
			<input type="submit" value="submit">
			</form>

		</div>


		<div id="ProductListRightMenu">
			<s:iterator value="product_line">
				<div class="clothingList">

					<s:url action="toDetail" var="urlTag">
						<s:param name="id">
							<s:property value="id" />
						</s:param>
					</s:url>
					<div class="clothing">
						<a href="<s:property value="#urlTag" />"><img
							src="./img/product_line_id/<s:property value="id"/>A.jpg" width="150" height="200"
							onerror="this.src='img/product_line_id/noPhoto.jpg'" /></a>
					</div>
					<s:property value="name" />

				</div>

			</s:iterator>

			<div style="position: absolute; left: 50%; bottom: 10px;">
				<s:set var="end" value="maxPage" />

				<s:iterator var="counter" begin="1" end="end">
					<a
						href="<s:url action="productList">
			<s:param name="gender" ><s:property value="gender"/></s:param>
			<s:param name="category" ><s:property value="category"/></s:param>
			<s:param name="type" ><s:property value="type"/></s:param>

			<s:param name="pageNum" ><s:property /></s:param>
			</s:url>"><s:property /></a>
				</s:iterator>

			</div>

		</div>
	</div>
</div>